<!-- 列表 -->
<template>
  <div style="margin-top:3vh">
    <el-table
      :data="tableData"
      :header-cell-style="hstyle"
      style="100%"
      row-key="id"
      :tree-props="{children: 'child',hasChildren: 'hasChildren'}"
    >
      <template v-for="(item,index) in listHeader">
        <el-table-column
          v-if="index == 0"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          align="center"
          min-width="10"
        >
          <template slot-scope="scope">
            <img :src="scope.row.image_url" alt='图片加载失败'  class="imgs"/>
          </template>
        </el-table-column>
        <el-table-column
          v-if="index == 1"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          align="center"
          min-width="10"
        >
          <template slot-scope="scope">
            <a :href="scope.row.link" class="link">点击跳转</a>
          </template>
        </el-table-column>
        <el-table-column
          v-if="index > 1"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          align="center"
          min-width="10"
        ></el-table-column>
      </template>

      <el-table-column label="操作" align="center" min-width="10" v-if="type != 'orderlist'">
        <template slot-scope="scope">
          <div v-if="type == 'userlist'">
            <!-- <el-button @click="handleClick(scope.row)" type="text" size="small">查看详情</el-button> -->
            <el-button type="text" size="small" @click="delect(scope.row)">删除</el-button>
          </div>
          <div v-else-if="type == 'rolelist'">
            <!-- <el-button @click="handleClick(scope.row)" type="text" size="small"></el-button> -->
            <el-button type="text" size="small" @click="amend(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="delect(scope.row)">删除</el-button>
          </div>
          <div v-else-if="type == 'menulist'">
            <el-button @click="addup(scope.row)" type="text" size="small">添加下级</el-button>
            <el-button type="text" size="small" @click="amend(scope.row)">修改</el-button>
            <el-button type="text" size="small" @click="delect(scope.row)">删除</el-button>
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop="name"
        label="姓名"
         align="center"
        min-width="10">
        </el-table-column>
        <el-table-column
        prop="province"
        label="省份"
         align="center"
       min-width="10">
        </el-table-column>
        <el-table-column
        prop="city"
        label="市区"
         align="center"
        min-width="10">
        </el-table-column>
        <el-table-column
        prop="address"
        label="地址"
         align="center"
        min-width="10">
        </el-table-column>
        <el-table-column
        prop="zip"
        label="邮编"
         align="center"
        min-width="10">
        </el-table-column>
        <el-table-column
        label="操作"
         align="center"
      min-width="10">-->

      <!-- </el-table-column> -->
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    listHeader: {
      type: Array,
      default: () => {
        return [];
      }
    },
    type: {
      type: String
    }
  },
  data() {
    return {
      hstyle: {
        color: "#111418",
        background: "#eff2f7"
      }
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods: {
    //点击列表查看
    handleClick(row) {
      row.type = "look";
      let compile = row;
      this.$emit("operate", compile);
    },
    //点击编辑权限
    compileClick(row) {
      row.type = "compile";
      let compile = row;
      this.$emit("operate", compile);
    },
    //点击删除
    delect(row) {
      row.type = "delect";
      let compile = row;
      this.$emit("operate", compile);
    },
    addup(row) {
      row.type = "addup";
      let compile = row;
      this.$emit("operate", compile);
    },
    amend(row) {
      row.type = "amend";
      let compile = row;
      this.$emit("operate", compile);
    }
  },
  computed: {
    listHeaders() {
      console.log(this.listHeader);
      return this.listHeader;
    }
  }
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.imgs{
    display: block;
    width: 50%;
    margin: auto;
}
.link{
    display: block;
    font-size: 16px;
    text-decoration: none;
}
</style>